<template>
    <ContentBox title="全县党员">
        <div class="quanxiandangyuan">
            <div class="top">
                <div>
                    <div class="header">
                        <span class="digiter-number">1233</span>人
                    </div>
                    <div class="bottom">党员人数</div>
                </div>
                <div>
                    <div class="header">
                        <span class="digiter-number">12</span>%
                    </div>
                    <div class="bottom">党员比率</div>
                </div>
                <div>
                    <div class="header">
                        <span class="digiter-number">112</span>人
                    </div>
                    <div class="bottom">年新增党员</div>
                </div>
                <div>
                    <div class="header">
                        <span class="digiter-number">21</span>%
                    </div>
                    <div class="bottom">流动党员比率</div>
                </div>
            </div>
            <div class="bottom">
                <quanxiandangyuan></quanxiandangyuan>
            </div>
        </div>

    </ContentBox>
</template>

<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import quanxiandangyuan from "./ChartsComponents/quanxiandangyuan"

    export default {
        components: {
            ContentBox,
            quanxiandangyuan,
        }
    }
</script>

<style lang="scss" scoped>
    .quanxiandangyuan {
        height: 100%;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        > div {
            flex: 1;

            &.top {
                background: #0D114E;
                display: flex;
                flex-wrap: wrap;
                padding: 40px;
                margin: 0 40px;
                border-radius: 40px;
                > div {
                    width: 50%;
                    border-bottom: 2px solid #0243A9;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    > .header {
                        font-size: 40px;
                        > span {
                            font-size: 80px;
                        }
                    }
                    > .bottom {
                        font-size: 40px;

                    }

                    &:nth-of-type(1) {
                        .header{
                            color: #EA4746;
                        }
                        span {
                            color: #EA4746;
                        }
                    }
                    &:nth-of-type(2) {
                        .header{
                            color: #01C8C7;
                        }
                        span {
                            color: #01C8C7;
                        }
                    }
                    &:nth-of-type(3) {
                        .header{
                            color: #01C8C7;
                        }
                        span {
                            color: #01C8C7;
                        }
                    }
                    &:nth-of-type(4) {
                        .header{
                            color: #767DED;
                        }
                        span {
                            color: #767DED;
                        }
                    }
                }

            }

        }

    }
</style>
